

import React, { useCallback } from 'react';

import { AutoComplete, Drawer, DrawerProps, Radio, Select, Space } from 'antd';
import {
  EditorFontSizeList,
  EditorLanguageList,
  EditorReadOnlyOptions,
  EditorThemeList,
  IEditorBasicProps,
} from './CodeEditorConfig';
import { EditorToolbarLayout } from './CodeEditorStyle';

interface Props extends DrawerProps {
  editorProps: Partial<IEditorBasicProps>;

  callback?: (value: any, key: keyof IEditorBasicProps) => void;
}

export const CodeEditorSetting: React.FC<Props> = (props) => {
  const { editorProps, callback, onClose, ...rest } = props;
  const { editorType, language, theme, fontSize, readOnly } = editorProps;

  /** 设置编辑器属性 */
  const handleValueChange = useCallback(
    (value: any, key: keyof IEditorBasicProps) => {
      if (callback) {
        callback(value, key);
      }
    },
    [callback]
  );

  return (
    <Drawer
      {...rest}
      open
      title="编辑器配置"
      width={300}
      getContainer={false}
      closable={false}
      onClose={onClose}
    >
      <EditorToolbarLayout
        className="editor-toolbar "
        style={{ marginLeft: 'auto' }}
      >
        <div className="editor-toolbar-group editor-toolbar-group-setting">
          <div className="editor-toolbar-group-item">
            <Space size={4}>
              编辑器
              <Select
                showSearch
                value={editorType}
                onChange={(value) => handleValueChange(value, 'editorType')}
                style={{ width: 100 }}
              >
                {['ace', 'monaco'].map((item, idx) => (
                  <Select.Option key={idx} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Space>
          </div>
          <div className="editor-toolbar-group-item">
            <Space size={4}>
              模式：
              <Select
                showSearch
                value={language}
                onChange={(value) => handleValueChange(value, 'language')}
                style={{ width: 100 }}
              >
                {EditorLanguageList.map((item, idx) => (
                  <Select.Option key={idx} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Space>
          </div>
          <div className="editor-toolbar-group-item">
            <Space size={4}>
              主题：
              <Select
                showSearch
                value={theme}
                onChange={(value) => handleValueChange(value, 'theme')}
                style={{ width: 100 }}
              >
                {EditorThemeList.map((item, idx) => (
                  <Select.Option key={idx} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Space>
          </div>
          <div className="editor-toolbar-group-item">
            <Space size={4}>
              字号：
              <AutoComplete
                value={fontSize}
                options={EditorFontSizeList.map((item) => ({
                  label: item,
                  value: `${item}`,
                }))}
                onChange={(value) =>
                  handleValueChange(Number(value), 'fontSize')
                }
                style={{ width: 100 }}
              />
            </Space>
          </div>
          <div className="editor-toolbar-group-item">
            <Space size={4}>
              只读：
              <Radio.Group
                optionType="button"
                buttonStyle="solid"
                value={readOnly}
                options={EditorReadOnlyOptions}
                onChange={(event) =>
                  handleValueChange(event.target.value, 'readOnly')
                }
              />
            </Space>
          </div>
        </div>
      </EditorToolbarLayout>
    </Drawer>
  );
};